<template>
    <div v-if="visible" class="video-popup">
        <div class="video-container video-bg">
            <video ref="videoRef" class="video-background" autoplay loop muted playsinline>
                <source src="~/assets/bgVideo.mp4" type="video/mp4" />
                您的浏览器不支持视频标签。
            </video>
            <div class="content-overlay">
                <slot></slot>
            </div>
            <div class="close-button" @click="closePopup">×</div>
            <div class="timer-indicator">{{ formatTime(remainingTime) }}</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'

const props = defineProps({
    autoCloseTime: {
        type: Number,
        default: 10,
    },
})

const emit = defineEmits(['close'])

const videoRef = ref<HTMLVideoElement | null>(null)
const visible = ref(true)
const remainingTime = ref(props.autoCloseTime)
let timerInterval: number | null = null

const formatTime = (seconds: number) => {
    const minutes = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

const closePopup = () => {
    visible.value = false
    emit('close')
    if (timerInterval) {
        clearInterval(timerInterval)
    }
}

onMounted(() => {
    if (videoRef.value) {
        // 确保视频加载并自动播放
        videoRef.value.load()

        // 在某些移动设备上可能需要手动触发播放
        const playPromise = videoRef.value.play()

        if (playPromise !== undefined) {
            playPromise.catch((error) => {
                console.error('视频自动播放失败:', error)
            })
        }
    }

    // 设置自动关闭计时器
    timerInterval = window.setInterval(() => {
        remainingTime.value--
        if (remainingTime.value <= 0) {
            closePopup()
        }
    }, 1000)
})

onUnmounted(() => {
    // 清理资源
    if (videoRef.value) {
        videoRef.value.pause()
        videoRef.value.src = ''
        videoRef.value.load()
    }

    // 清除计时器
    if (timerInterval) {
        clearInterval(timerInterval)
    }
})
</script>

<style scoped lang="scss">
.video-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保视频覆盖整个容器而不变形 */
    z-index: 100;
}

.content-overlay {
    position: relative;
    z-index: 200;
    width: 100%;
    height: 100%;
}

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    z-index: 300;
    transition: background-color 0.3s;

    &:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }
}

.timer-indicator {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 4px;
    font-size: 14px;
    z-index: 300;
}
</style>
